<template>
    <view class="container">
        <u-sticky>
            <view class="header">
                <view class="search">
                    <u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa" @search="onRefresh"></u-search>
                </view>
            </view>
        </u-sticky>
        
        <!-- 
            scroll-y 允许纵向滚动
            refresher-triggered 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
            refresher-enabled 开启自定义下拉刷新
            refresherrefresh  自定义下拉刷新被触发
            scrolltolower 上拉加载触发
            scroll 触发滚动
            lower-threshold 距底部/右边多远时（单位px），触发 scrolltolower 事件
            scroll-top 设置竖向滚动条位置
        -->
        <scroll-view 
            class="list" 
            :scroll-y="true"
            :scroll-top="top"
            :refresher-triggered="refresh" 
            :refresher-enabled="true"
            :lower-threshold="100"
            @scroll="onScroll"
            @refresherrefresh="onRefresh" 
            @scrolltolower="scrollTol"
            :style="{ height: `${height}px` }"
        >
        <!-- query_code -->
            <navigator  :url="`/pages/validate/info?code=${item.query_code}`" class="item" v-for="(item,key) in productList" :key="key">
                <view class="title">
                    {{item.products.name}}
                </view>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">
                            {{item.query_num}}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            您查询的防伪码：
                        </view>
                        <view class="value">
                            {{ item.query_code }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">
                            {{ item.queryTime_text }}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            二维码：
                        </view>
                        <view class="value">
                            <image
                                src="/static/images/code.png"
                            />
                        </view>
                    </view>
                </view>
            </navigator>
            <!-- 下面加载的状态 -->
            <u-loadmore :status="status" color="#1CD29B"
				lineColor="#1CD29B"
				dashed
				line
            />
        </scroll-view>

        <!-- 返回顶部 -->
		<u-back-top :scroll-top="top" @click="top = 0"></u-back-top>
    </view>
</template>
<script>
export default{
    onShow(){
        this.business = uni.getStorageSync('business')?uni.getStorageSync('business'):{}
        if(Object.keys(this.business).length>0){
            //登录
            this.onRefresh()
        }else{
            //未登录
        }
    },
    //求页面的高度 监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
    onReady()
    {
        //调用uni接口 获取页面的高度 异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。
        uni.getSystemInfo(
        {
            success: res =>
            {
                this.height = res.windowHeight;
            },
        });
    },
    data() {
        return {
            refresh:false,// 下拉刷新状态
            finished:false,// 上拉加载状态
            Isfreshing: false, //防止重复刷新
            list:[],
            page:1,
            limit:5,
            business:{},
            status:'loadmore',
            keyword:'',
            top:0,
            productList:[],
            height: 0, //页面高度
        }
    },
    methods:{
        onRefresh()
        {
            //防止重复下拉刷新
            if (this.Isfreshing) return false;

            //执行一次下拉刷新
            this.Isfreshing = true;
            if(!this.refresh) this.refresh=true
            this.page = 1
            this.productList = []
            this.ProductData();
        },
        onScroll(e){
            // console.log(e)
            this.top = e.detail.scrollTop;
        },
        scrollTol()
        {
            this.ProductData();
        },
        
        //order-product列表显示的请求
        async ProductData(){
            var busid = this.business.id ? this.business.id : 0

            // 将需要传递的值传递后端
            var result = await uni.$u.http.post('/business/productIndex',{
                busid:busid,
                keyword:this.keyword,
                page:this.page,
            })
            this.status = 'loadmore';
            if (this.Isfreshing) this.Isfreshing = false;
            if(this.refresh) this.refresh = false;
            if(result.code == 0){
                this.status = 'nomore';
                return false;
            }
            //分页
            console.log(result.data);
            
            this.productList = this.productList.concat(result.data);
            this.page = this.page+1;
        }
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.header{
    background-color: #fff;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
}

.header .search{
    width: 95%;
    margin: 0 auto;
}

.item{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.item .title{
    padding:10px 0 10px 10px;
    font-size: 20px;
}

.item .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.item .son-list .son-item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.item .son-list .son-item .name{
    color:#9b9b9a;
}

.item .son-list .son-item image{
    width: 30px;
    height: 30px;
}
</style>